<script setup>
import { ref } from 'vue';
import { goBack, goCommunity, getRouteParams, goHome } from "../../tools/go";

// 从页面传参定义返回页面，flag  1首页
var flag = getRouteParams('flag');

// 小区列表
const communityList = ref([
  { id: 1, name: "好事时光 6栋6-3" },
  { id: 2, name: "阳光花园 8栋2-1" },
  { id: 3, name: "幸福家园 3栋5-2" },
]);

// 当前选择的小区
const selectedCommunity = ref(communityList.value[0]);

// 选择小区
const selectCommunity = () => {
  uni.showActionSheet({
    itemList: communityList.value.map(item => item.name),
    success: (res) => {
      selectedCommunity.value = communityList.value[res.tapIndex];
    }
  });
};

// 问题类型列表
const issuelist = ref([
  { id: 1, name: "水电故障" },
  { id: 2, name: "门窗问题" },
  { id: 3, name: "墙面损坏" },
  { id: 4, name: "地板问题" },
  { id: 5, name: "电器故障" },
  { id: 6, name: "家具损坏" },
  { id: 7, name: "网络故障" },
  { id: 8, name: "其他问题" },
]);

// 当前选中的问题类型
const selectedIssue = ref(null);

// 预约时间和期望完成时间
const appointmentTime = ref('');
const expectedCompletionTime = ref('');

// 选择问题类型
const selectIssue = (item) => {
  selectedIssue.value = item.id;
};

// 选择预约时间
const onAppointmentTimeChange = (e) => {
  appointmentTime.value = e.detail.value;
};

// 选择期望完成时间
const onExpectedCompletionTimeChange = (e) => {
  expectedCompletionTime.value = e.detail.value;
};

// 选择文件
const uploadedFiles = ref([]);
const selectFile = () => {
  uni.chooseImage({
    count: 5, // 最多可选择的图片张数
    success: (res) => {
      uploadedFiles.value = [...uploadedFiles.value, ...res.tempFilePaths];
    }
  });
};

// 提交表单
const submitForm = () => {
  if (!selectedIssue.value) {
    uni.showToast({
      title: '请选择问题类型',
      icon: 'none'
    });
    return;
  }

  if (!appointmentTime.value) {
    uni.showToast({
      title: '请选择预约时间',
      icon: 'none'
    });
    return;
  }

  // 提交表单逻辑
  uni.showLoading({
    title: '提交中...'
  });

  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({
      title: '提交成功',
      icon: 'success'
    });
    // 提交后返回上一页
    setTimeout(() => {
      goBack();
    }, 1500);
  }, 1000);
};
</script>

<template>
  <view class="report-page">
    <!-- 页头 -->
    <view class="header">
      <v-icon icon="mdi-chevron-left" @click="flag == 1 ? goHome() : goCommunity()" class="back-icon"></v-icon>
      <h3>报事报修</h3>
      <text class="history-link">历史记录</text>
    </view>

    <!-- 表单内容 -->
    <view class="form-container">
      <!-- 房屋信息 -->
      <view class="house-info-section">
        <text class="section-title">当前房屋信息</text>
        <view class="house-address" @click="selectCommunity">
          <text>{{ selectedCommunity.name }}</text>
          <v-icon icon="mdi-chevron-right" class="icon"></v-icon>
        </view>
      </view>

      <!-- 问题类型 -->
      <view class="issue-type-section">
        <h4 class="section-title">问题类型</h4>
        <ul class="issue-grid">
          <li v-for="item in issuelist" :key="item.id" @click="selectIssue(item)"
              :class="{ active: selectedIssue === item.id }">
            <text>{{ item.name }}</text>
          </li>
        </ul>
      </view>

      <!-- 预约时间 -->
      <view class="time-section">
        <h3>预约时间</h3>
        <picker mode="time" :value="appointmentTime" @change="onAppointmentTimeChange">
          <view class="time-selector">
            <text v-if="appointmentTime">{{ appointmentTime }}</text>
            <text v-else class="placeholder">请选择时间</text>
            <v-icon class="icon" icon="mdi-chevron-right"></v-icon>
          </view>
        </picker>
      </view>

      <!-- 期望完成时间 -->
      <view class="time-section">
        <h3>期望完成时间</h3>
        <picker mode="time" :value="expectedCompletionTime" @change="onExpectedCompletionTimeChange">
          <view class="time-selector">
            <text v-if="expectedCompletionTime">{{ expectedCompletionTime }}</text>
            <text v-else class="placeholder">请选择时间</text>
            <v-icon class="icon" icon="mdi-chevron-right"></v-icon>
          </view>
        </picker>
      </view>

      <!-- 问题描述 -->
      <view class="description-section">
        <h3 style="margin-left: 10px;">问题描述</h3>
        <textarea placeholder="请详细描述您遇到的问题，以便我们更好地为您服务..." rows="3"
                  class="description-textarea" style="width: 95%;margin: 10px auto"></textarea>
      </view>

      <!-- 上传图片 -->
      <view class="upload-section" style="margin-left: 10px;">
        <h3>上传图片</h3>
        <view class="upload-container">
          <view v-for="(file, index) in uploadedFiles" :key="index" class="upload-preview">
            <image :src="file" mode="aspectFill"></image>
            <v-icon icon="mdi-close-circle" class="delete-icon" @click="uploadedFiles.splice(index, 1)"></v-icon>
          </view>

          <view class="upload-button" @click="selectFile" v-if="uploadedFiles.length < 5">
            <v-icon icon="mdi-plus" class="plus-icon"></v-icon>
          </view>
        </view>
        <text class="upload-tip">最多上传5张图片，支持对问题进行拍照</text>
      </view>

      <!-- 提交按钮 -->
      <view class="submit-section">
        <button class="submit-button" @click="submitForm">立即提交</button>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
@use "../../static/css/main.scss";

body::-webkit-scrollbar {
  display: none;
}

.report-page {
  @include main.useTheme() {
    min-height: 100vh;
    background-color: main.getVal("two_lv_bg_color");

    // 头部样式
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 0 16px;
      background-color: #ffffff;
      border-bottom: 1px solid #e0e0e0;
      height: 60px;

      .back-icon {

        font-size: 30px;
        color: #333333;
        cursor: pointer;
      }

      h3 {
        position: relative;
        left: 11px;
        font-size: 18px;
        font-weight: 400;
        color: #000000;
        margin: 0;
      }

      .history-link {
        font-size: 14px;
        color: #000000;
        cursor: pointer;
      }
    }

    // 表单容器
    .form-container {
      padding-bottom: 30px;

      // 房屋信息部分
      .house-info-section {
        width: 100%;
        background-color: main.getVal("primary_bg_color");
        margin-top: 12px;
        padding: 16px;

        .section-title {
          font-size: 16px;
          font-weight: 500;
          color: main.getVal("primary_text_color");
          margin-bottom: 12px;
          display: block;
        }

        .house-address {
          display: flex;
          justify-content: space-between;
          align-items: center;

          text {
            font-size: 15px;
            color: main.getVal("primary_text_color");
          }

          .icon {
            color: main.getVal("three_lv_text_color");
          }
        }
      }

      // 问题类型部分
      .issue-type-section {
        width: 100%;
        background-color: main.getVal("primary_bg_color");
        margin-top: 12px;
        padding: 16px;

        .section-title {
          font-size: 16px;
          font-weight: 500;
          color: main.getVal("primary_text_color");
          margin-bottom: 16px;
        }

        .issue-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 10px;

          li {
            height: 40px;
            background-color: main.getVal("two_lv_bg_color");
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;

            &.active {
              background-color: main.getVal("pri_color");

              text {
                color: white;
              }
            }

            &:hover {
              transform: translateY(-2px);
            }

            text {
              font-size: 14px;
              color: main.getVal("primary_text_color");
              text-align: center;
            }
          }
        }
      }

      // 时间选择部分
      .time-section {
        width: 100%;
        height: 60px;
        background-color: main.getVal("primary_bg_color");
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12px;
        padding: 0 16px;

        h3 {
          font-size: 16px;
          font-weight: 500;
          color: main.getVal("primary_text_color");
        }

        .time-selector {
          display: flex;
          align-items: center;

          text {
            font-size: 15px;
            color: main.getVal("primary_text_color");
            margin-right: 8px;
          }

          .placeholder {
            color: #999999;
          }

          .icon {
            color: main.getVal("three_lv_text_color");
          }
        }
      }

      .description-section {
        margin-top: 12px;

        h3 {
          font-size: 16px;
          font-weight: 500;
          color: main.getVal("primary_text_color");
        }

        textarea {
          width: 100%;
          padding: 10px;
          border: 1px solid #e0e0e0;
          border-radius: 4px;
          margin-top: 10px;
          resize: none;
        }
      }

      .upload-section {
        margin-top: 12px;

        h3 {
          font-size: 16px;
          font-weight: 500;
          color: main.getVal("primary_text_color");
        }

        .upload-container {
          display: flex;
          flex-wrap: wrap;

          .upload-preview {
            position: relative;
            margin-right: 10px;
            margin-bottom: 10px;

            image {
              width: 100px;
              height: 100px;
              border-radius: 4px;
            }

            .delete-icon {
              position: absolute;
              top: 5px;
              right: 5px;
              color: red;
              font-size: 20px;
              cursor: pointer;
            }
          }

          .upload-button {
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px dashed #e0e0e0;
            border-radius: 4px;
            cursor: pointer;

            .plus-icon {
              font-size: 32px;
              color: #999999;
            }
          }
        }

        .upload-tip {
          font-size: 14px;
          color: main.getVal("primary_text_color");
        }
      }

      .submit-section {
        margin-top: 12px;
        text-align: center;

        .submit-button {
          width: 50%;
          background-color: main.getVal("pri_color");
          color: white;
          border: none;
          border-radius: 4px;
          padding: 10px;
          font-size: 16px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
